<script setup lang="ts">
import { showLoading, hideLoading, reLaunch, setStorage } from '@tarojs/taro';
import { reactive, ref, onMounted } from 'vue';
import { cloneDeep } from 'lodash';
import { INSERT_VISITOR_RECORD_MANUAL } from '/@/api/modules/visitor/visitor-record-manual';
import { QUERY_DICT_BY_PARENT_CODE } from '/@/api/modules/base/dict';
import { formRules } from './state';

const visitorFormRef = ref();

const state = reactive<{
  /**
   * 拜访部门列表
   */
  visitDeptList: AppSysDict.Dto[];
  /**
   * 拜访部门选择器是否显示
   */
  visitDeptPickerIsShow: boolean;
}>({
  visitDeptList: [],
  visitDeptPickerIsShow: false,
});

const formState = reactive<AppSysVisitor.Dto>({
  personName: '',
  visitorWorkUint: '',
  purpose: '',
  startTime: 0,
  phone: '',
  idNo: '',
  carNo: '',
  beVisitedPersonOrg: '',
  signLocation: 'h5',
});

/**
 * @function 确认提交
 */
function submit() {
  visitorFormRef.value.validate().then(({ valid }) => {
    if (!valid) return;
    showLoading({ title: '加载中...' });

    const _form = cloneDeep(formState);
    _form.startTime = new Date().valueOf();

    INSERT_VISITOR_RECORD_MANUAL({ content: _form }).then(() => {
      hideLoading();
      setStorage({
        key: 'visitorInfo',
        data: _form,
        success: () => {
          reLaunch({ url: '/pages/visitor/register-success/index' });
        },
      });
    });
  });
}

onMounted(() => {
  QUERY_DICT_BY_PARENT_CODE({
    parentTag: 'visit_dept',
  }).then((res) => {
    state.visitDeptList = res.content;
  });
});
</script>

<template>
  <view class="visitor-register app-page--1">
    <view class="visitor-register__header">
      <text>中共淄博市委党校外来人员登记</text>
    </view>
    <scroll-view class="app-page__wrapper" :scroll-y="true" :lower-threshold="100">
      <view class="visitor-register__wrapper">
        <nut-form
          :model-value="formState"
          :rules="formRules"
          class="visitor-register__form"
          ref="visitorFormRef"
        >
          <nut-form-item
            required
            label="单位"
            prop="visitorWorkUint"
            label-align="left"
            error-message-align="left"
          >
            <nut-input
              v-model="formState.visitorWorkUint"
              placeholder="请输入单位"
              :border="false"
              clearable
            />
          </nut-form-item>
          <nut-form-item
            required
            label="姓名"
            prop="personName"
            label-align="left"
            error-message-align="left"
          >
            <nut-input
              v-model="formState.personName"
              placeholder="请输入姓名"
              :border="false"
              clearable
            />
          </nut-form-item>
          <nut-form-item
            required
            label="联系电话"
            prop="phone"
            label-align="left"
            error-message-align="left"
          >
            <nut-input
              v-model="formState.phone"
              placeholder="请输入联系电话"
              type="digit"
              :border="false"
              clearable
            />
          </nut-form-item>
          <nut-form-item label="身份证" prop="carNo" label-align="left" error-message-align="left">
            <nut-input
              v-model="formState.idNo"
              placeholder="请输入身份证（选填）"
              :border="false"
              clearable
            />
          </nut-form-item>
          <nut-form-item label="车牌号" prop="carNo" label-align="left" error-message-align="left">
            <nut-input
              v-model="formState.carNo"
              placeholder="请输入车牌号（选填）"
              :border="false"
              clearable
            />
          </nut-form-item>
          <nut-form-item
            required
            label="拜访部门"
            prop="beVisitedPersonOrg"
            label-align="left"
            error-message-align="left"
          >
            <nut-input
              v-model="formState.beVisitedPersonOrg"
              placeholder="请选择拜访部门"
              :border="false"
              readonly
              @click="state.visitDeptPickerIsShow = !state.visitDeptPickerIsShow"
            />
          </nut-form-item>
          <nut-form-item
            required
            label="事由"
            prop="purpose"
            label-align="left"
            error-message-align="left"
          >
            <nut-textarea
              v-model="formState.purpose"
              placeholder="请输入事由"
              text-align="left"
              limit-show
              max-length="50"
              rows="6"
              clearable
            />
          </nut-form-item>
        </nut-form>
        <nut-button class="visitor-register__submit-btn" type="info" block @click="submit()">
          提交
        </nut-button>
      </view>
    </scroll-view>

    <nut-popup v-model:visible="state.visitDeptPickerIsShow" position="bottom">
      <nut-picker
        v-model:value="formState.beVisitedPersonOrg"
        title="请选择拜访部门"
        :columns="
          state.visitDeptList.map((v) => {
            return { text: v.dictName, value: v.id };
          })
        "
        @confirm="
          ({ selectedOptions }) => {
            formState.beVisitedPersonOrg = selectedOptions[0].text;
            state.visitDeptPickerIsShow = false;
          }
        "
        @cancel="state.visitDeptPickerIsShow = false"
      />
    </nut-popup>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
